<template>
  <fks-dialog
    :visible="true"
    :append-to-body="true"
    @close="close"
    width="960px"
    top="8vh"
    ref="dialog"
    v-cloak
  >
    <!-- 弹窗标题（icon + 文字） -->
    <template slot="title">
      <!-- 表单新增 -->
      <i class="fks-icon-plus" v-if="type === 'add'"></i>
      <!-- 表单执行\编辑 -->
      <i class="fks-icon-edit" v-if="type === 'execute' || type === 'edit'"></i>
      <!-- 表单查看 -->
      <i class="fks-icon-view" v-if="type === 'view'"></i>
      <span>
        {{
          type !== 'add'
            ? formName + (taskNodeName ? `-${taskNodeName}` : '')
            : formName
        }}
      </span>
    </template>
    <!-- form项json解析成html -->
    <Form
      @success="success"
      @setFormName="setFormName"
      @setTaskNodeName="setTaskNodeName"
    />
    <div slot="footer">
      <FlowButton />
    </div>
  </fks-dialog>
</template>

<script>
import Form from '@/modules/FormCenter/componentsWp/Form/index.vue'
import FlowButton from '@/modules/FormCenter/componentsWp/FlowButton/flowButton.vue'
import Mix from '@/mixins/module'
export default {
  //自由流程表单 组件
  name: 'CustomForm',
  components: {
    Form,
    FlowButton
  },
  mixins: [Mix],
  data() {
    return {
      formName: '',
      taskNodeName: '',
      type: this.$route.params.type
    }
  },
  methods: {
    //表单弹窗 关闭
    close() {
      this.$router.replace(this.$route.fullPath.match(/(\S*)\/customForm/)[1])
    },
    success() {
      this.close()
      this.$emit('success')
    },
    setFormName(val) {
      this.formName = val
    },
    setTaskNodeName(val) {
      this.taskNodeName = val
    }
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
[v-cloak]:not(body) {
  display: none;
}
</style>
